var MachineItem = function () {
  var template = /*html*/ `
    <div class="machine-item">
      <el-card :body-style="{padding:'10px'}" shadow="hover">
        <img :src="formatImgUrl(machine.url)" class="machine-item-img" :class="{gray:machine.state!==2}" @click="machineClick">
        <div slot="header" style="text-align:left;height:42px;">
          <div>{{machine.equipmentNo}}</div>
          <div>{{machine.equipmentName}}</div>
        </div>
        <div class="machine-item-content">
          <div>
            <label>设备状态:</label>
            <span :class="'machine-state-text state-'+machine.state">{{ModuleUtil.getMachineStatus(machine.state)}}</span>
          </div>
          <div>
            <label>加工订单:</label>
            <span>{{machine.orderNo}}</span>
          </div>
          <div>
            <label>加工数量:</label>
            <span>{{machine.yield}}</span>
          </div>
          <div>
            <label>用电量:</label>
            <span v-if="machine.useElectric!==null">{{getUseElectric(machine.useElectric)}}w.h</span>
          </div>
        </div>
      </el-card>
    </div>
  `;

  return {
    props:{
      machine:{
        type:Object,
        required: true
      }
    },
    data: function () {
      return {
        ModuleUtil:ModuleUtil
      };
    },
    methods:{
      machineClick:function(){
        this.$emit('img-click');
      },

      getUseElectric:function(useElectric){
        useElectric = _.round(useElectric * 1000, 2);
        return useElectric;
      }
    },
    template: template
  };
}();